<template>
  <div class="app-container">
    <div class="mx-auto">
      <div class="min-h-screen p-24 flex flex-col gap-8" data-testid="inbound-order-details-page">
        <div>
          <el-button type="text" @mouseenter.native="underline = false" @mouseleave.native="underline = true"
            @click="returnShipment" icon="el-icon-back" :style="{
              textDecoration: underline ? 'underline' : 'none',
              color: underline ? 'black' : '#007bff',
            }">
            所有入库订单
          </el-button>
        </div>
        <div class="flex flex-col gap-24">
          <div class="flex flex-row justify-between items-center">
            <h1 class="PageTitle-module_pageTitle__QNwSU text-28" data-testid="page-title">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">入库订单编号</font>
              </font>
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">：</font>
              </font>
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">{{
                  this.queryParam.inboundOrderId
                  }}</font>
              </font>
            </h1>
            <el-button type="text" @mouseenter.native="underline1 = false" @mouseleave.native="underline1 = true"
              @click="cancelShipment" :style="{
                textDecoration: underline1 ? 'underline' : 'none',
                color: underline1 ? 'black' : '#007bff',
                fontSize: '16px',
              }" v-if="this.queryParam.status != 'CLOSED' && this.queryParam.status != 'CANCELLED'" v-hasPermi="['walmart:shipment:cancelled']">
              取消入库订单
            </el-button>
          </div>

          <div class="flex flex-row gap-24">
            <div class="flex-grow flex flex-col gap-24">
              <div v-for="iteration in this.index" :key="iteration">
                <div class="Card-module_card__zeE7r Card-module_medium__quHDO flex flex-col"
                  data-testid="shipment-card-4205749GDM" style="gap: 12px">
                  <div class="flex ">
                    <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs" variant="3"
                      weight="700">
                      <font style="vertical-align: inherit"></font>
                      <font style="vertical-align: inherit">
                        <font style="vertical-align: inherit">第 {{ iteration }}</font>
                        <font style="vertical-align: inherit">批货</font>
                      </font>
                      <font style="vertical-align: inherit">
                        <font style="vertical-align: inherit">，共</font>
                      </font>
                      <font style="vertical-align: inherit">
                        <font style="vertical-align: inherit">{{ index }}批</font>
                      </font>
                    </p>
                    <span style="color: gray;font-size:18px;margin-left:5px;margin-right: 5px;">|</span>
                    <div class="flex items-center gap-4">
                      <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12 fontsize18"
                        variant="2">
                        <font style="vertical-align: inherit">
                          <font style="vertical-align: inherit">运送到</font>
                        </font>
                        <font style="vertical-align: inherit">
                          <font style="vertical-align: inherit">：</font>
                        </font>
                      </p>
                      <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12 fontsize18"
                        variant="2">
                        <font style="vertical-align: inherit">
                          <font style="vertical-align: inherit">{{ shipmentList[iteration - 1].shipFcName }} |
                            {{
                              shipmentList[iteration - 1].shipAddressLine
                            }}，{{ shipmentList[iteration - 1].shipCity }}，{{
                              shipmentList[iteration - 1].shipStateCode
                            }}
                            {{
                              shipmentList[iteration - 1].shipPostalCode
                            }}，{{
                              shipmentList[iteration - 1].shipCountryCode
                            }}</font>
                        </font>
                      </p>
                    </div>
                  </div>
                  <hr aria-hidden="true" class="Divider-module_divider__3HRuC" />
                  <div class="flex flex-row gap-24">
                    <div class="flex-grow flex flex-col gap-4">
                      <div class="flex items-center gap-4">
                        <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12 fontsize15"
                          variant="2">
                          <font style="vertical-align: inherit">
                            <font style="vertical-align: inherit">货件编号</font>
                          </font>
                          <font style="vertical-align: inherit">
                            <font style="vertical-align: inherit">：</font>
                          </font>
                        </p>
                        <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12 mr-12 fontsize15"
                          variant="2">
                          <font style="vertical-align: inherit">
                            <font style="vertical-align: inherit">{{
                              shipmentList[iteration - 1].shipmentId
                              }}</font>
                          </font>
                        </p>
                        <div style="display: flex; margin-left: auto; height: 30px;">
                          <el-button type="text" @mouseenter.native="toggleUnderline(iteration, false)"
                            @mouseleave.native="toggleUnderline(iteration, true)" @click="returnShipmentItem(iteration)"
                            :style="styleFor(iteration)">
                            查看摘要
                          </el-button>
                          <span
                            class="Tag-module_tag__LljoB Tag-module_spark__maMsc Tag-module_filled__H-VIP w-full flex justify-center items-center"
                            style="margin-left:30px">
                            <font style="vertical-align: inherit">
                              <font style="vertical-align: inherit">
                                <dict-tag :options="dict.type.walmart_shipments_status" :value="shipmentList[iteration - 1].status
                                  " />
                              </font>
                            </font>
                          </span>
                        </div>
                      </div>
                      <div class="flex items-center gap-4">
                        <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12 fontsize15"
                          variant="2">
                          <font style="vertical-align: inherit">
                            <font style="vertical-align: inherit">数量</font>
                          </font>
                          <font style="vertical-align: inherit">
                            <font style="vertical-align: inherit">：</font>
                          </font>
                        </p>
                        <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12 fontsize15"
                          variant="2">
                          <font style="vertical-align: inherit">
                            <font style="vertical-align: inherit">{{ shipmentList[iteration - 1].itemIndex }} 件 |
                              {{
                                shipmentList[iteration - 1].shipmentUnits
                              }} 个</font>
                          </font>
                        </p>
                        <div class="flex items-center gap-4">
                          <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12"
                            variant="2">
                            <font style="vertical-align: inherit">
                              <font style="vertical-align: inherit"> | 承运商</font>
                            </font>
                            <font style="vertical-align: inherit">
                              <font style="vertical-align: inherit">：</font>
                            </font>
                          </p>
                          <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12"
                            variant="2">
                            <font style="vertical-align: inherit"><template v-if="
                              shipmentList[iteration - 1].carrierName !== null
                            ">
                                <font style="vertical-align: inherit">{{
                                  shipmentList[iteration - 1].carrierName
                                }}</font>
                              </template>
                              <template v-else>
                                <font style="vertical-align: inherit">--</font>
                              </template>
                            </font>
                          </p>
                        </div>
                      </div>
                      <div style="display: flex; justify-content: space-between; align-items: center;" v-if="shipmentList[iteration - 1].status !== 'CANCELLED' &&
                        shipmentList[iteration - 1].status !== 'RECEIVING_IN_PROGRESS' &&
                        shipmentList[iteration - 1].status !== 'PENDING_SHIPMENT_DETAILS'">
                        <div>
                          <p style="margin-top: 10px; margin-bottom: 5px; font-weight: 600;">追踪</p>
                          <p style="margin-top: 0; margin-bottom: 5px;">打印标签后即可获得跟踪信息。</p>
                        </div>
                        <el-button class="track-button" type="text" @click="handleTracking"
                          style="margin-top:3%; border-radius: 12px; padding: 5px 20px; border: 1px solid black; color: black; font-size: 20px;transition: all 0.3s ease;">
                          追踪
                        </el-button>
                      </div>
                      <div class="underline-"></div>
                      <div style="display: flex; justify-content: space-between; align-items: center;" v-if="shipmentList[iteration - 1].status == 'RECEIVING_IN_PROGRESS' ||
                        shipmentList[iteration - 1].status == 'CREATED' ||
                        shipmentList[iteration - 1].status == 'AWAITING_DELIVERY' ||
                        shipmentList[iteration - 1].status == 'COMPLETED'">
                        <div>
                          <p style="margin-top: 10px; margin-bottom: 5px; font-weight: 600;">标签</p>
                          <p style="margin-top: 0; margin-bottom: 5px;">下载承运人和接收标签以及提单。</p>
                        </div>
                        <el-button class="track-button" type="text" @click="handleLabel"
                          style="margin-top:3%; border-radius: 12px; padding: 5px 20px; border: 1px solid black; color: black; font-size: 20px;transition: all 0.3s ease;">
                          打印标签
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <hr aria-hidden="true" class="Divider-module_divider__3HRuC" />
                </div>
              </div>
            </div>
            <div class="flex flex-col gap-24" style="width: 360px">
              <div class="Card-module_card__zeE7r Card-module_medium__quHDO flex flex-col gap-4">
                <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight700__crYTs" weight="700">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">入库订单详细信息</font>
                  </font>
                </p>
                <div class="flex justify-between items-center gap-4">
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">创建</font>
                    </font>
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">：</font>
                    </font>
                  </p>
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2"
                    v-if="this.shipmentList.length > 0">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">{{
                        parseTime(
                          this.shipmentList[0].createdDate,
                          "{y}年{m}月{d}日"
                        )
                      }}</font>
                    </font>
                  </p>
                </div>
                <div class="flex justify-between items-center gap-4">
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">总项目</font>
                    </font>
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">：</font>
                    </font>
                  </p>
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">{{
                        this.itemIndex
                        }}</font>
                    </font>
                  </p>
                </div>
                <div class="flex justify-between items-center gap-4">
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">总单位数</font>
                    </font>
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">：</font>
                    </font>
                  </p>
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">{{
                        this.shipmentUnitsAdd
                        }}</font>
                    </font>
                  </p>
                </div>
              </div>
              <div class="Card-module_card__zeE7r Card-module_medium__quHDO flex flex-col gap-4">
                <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight700__crYTs" weight="700">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">发货自</font>
                  </font>
                </p>
                <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2"
                  v-if="this.shipmentList.length > 0">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">{{
                      this.shipmentList[0].shopName
                      }}</font>
                  </font>
                </p>
                <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2"
                  v-if="this.shipmentList.length > 0">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">{{ this.shipmentList[0].returnAddressLine }},
                      {{ this.shipmentList[0].returnCity }},{{
                        this.shipmentList[0].returnStateCode
                      }}
                      {{ this.shipmentList[0].returnPostalCode }},
                      {{ this.shipmentList[0].returnCountryCode }}</font>
                  </font>
                </p>
              </div>
              <div class="Card-module_card__zeE7r Card-module_medium__quHDO flex flex-col gap-4">
                <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight700__crYTs" weight="700">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">预估价格</font>
                  </font>
                </p>
                <div class="flex justify-between items-center gap-4">
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">WFS 准备服务</font>
                    </font>
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">：</font>
                    </font>
                  </p>
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
                    <font style="vertical-align: inherit"></font>
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">0.00</font>
                      <font style="vertical-align: inherit">美元</font>
                    </font>
                  </p>
                </div>
                <div class="flex justify-between items-center gap-4">
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight700__crYTs" variant="2"
                    weight="700">
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">全部的</font>
                    </font>
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">：</font>
                    </font>
                  </p>
                  <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight700__crYTs" variant="2"
                    weight="700">
                    <font style="vertical-align: inherit"></font>
                    <font style="vertical-align: inherit">
                      <font style="vertical-align: inherit">0.00</font>
                      <font style="vertical-align: inherit">美元</font>
                    </font>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="open" width="50%">
      <p>Shipment ID: 2109800GDM</p>
      <el-table :data="shipmentItemList" :max-height="400">
        <el-table-column align="center" property="imageUrl" width="100">
          <template slot-scope="scope">
            <image-preview v-if="scope.row.imageUrl" :src="scope.row.imageUrl" :width="50" :height="50" />
            <i v-else class="no-image-icon"><image-preview :src="scope.row.imageUrl" :width="50" :height="50" /></i>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" property="itemDesc" width="320px">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="链接名称" width="600" trigger="hover" :content="scope.row.itemDesc">
              <span slot="reference">{{ scope.row.itemDesc.slice(0, 39)
              }}<span v-if="scope.row.itemDesc.length > 39">...</span></span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column property="sku" label="SKU"></el-table-column>
        <el-table-column property="itemQty" label="总单位数"></el-table-column>
        <el-table-column property="innerPackQty" label="单位/主箱"></el-table-column>
        <el-table-column property="address" label="准备服务"></el-table-column>
      </el-table>
      <div class="flex flex-col gap-16">
        <p style="font-weight: 700; color: #2e2f32; font-size: 16px">
          <font style="vertical-align: inherit">
            <font style="vertical-align: inherit">商品详情</font>
          </font>
        </p>
        <div class="flex flex-col gap-4">
          <div class="flex justify-between items-center">
            <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">总项目</font>
              </font>
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">：</font>
              </font>
            </p>
            <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">{{
                  this.shipmentItem.itemIndex
                  }}</font>
              </font>
            </p>
          </div>
          <div class="flex justify-between items-center">
            <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">总单位数</font>
              </font>
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">：</font>
              </font>
            </p>
            <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">{{
                  this.shipmentItem.shipmentUnits
                  }}</font>
              </font>
            </p>
          </div>
        </div>
      </div>
      <hr aria-hidden="true" class="Divider-module_divider__3HRuC" style="height: 16px" />
      <div class="flex flex-col gap-16">
        <p style="font-weight: 700; color: #2e2f32; font-size: 16px">
          <font style="vertical-align: inherit">
            <font style="vertical-align: inherit">配送详情</font>
          </font>
        </p>
        <div class="flex flex-col gap-4">
          <div class="flex justify-between items-center">
            <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">发货至</font>
              </font>
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">：</font>
              </font>
            </p>
            <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
              <font style="vertical-align: inherit">
                <font style="vertical-align: inherit">{{ this.shipmentItem.shipAddressLine }}，{{
                  this.shipmentItem.shipCity
                }}，{{ this.shipmentItem.shipStateCode }}
                  {{ this.shipmentItem.shipPostalCode }}，{{
                    this.shipmentItem.shipCountryCode
                  }}</font>
              </font>
            </p>
          </div>
        </div>
      </div>
      <hr aria-hidden="true" class="Divider-module_divider__3HRuC"
        style="height: 16px; margin-left: -19px; width: 104%" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="cancelTitle" :visible.sync="cancelOpen" width="30%">
      <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
        <font style="vertical-align: inherit">
          <font style="vertical-align: inherit">以下所有发货将被取消。这不能被撤消。</font>
        </font>
      </p>
      <br />
      <div v-for="iteration in this.index" :key="iteration">
        <div>
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight700__crYTs" weight="700">
            <font style="vertical-align: inherit"></font>
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">第 {{ iteration }}</font>
              <font style="vertical-align: inherit">批货</font>
            </font>
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">，共</font>
            </font>
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">{{ index }}批</font>
            </font>
          </p>
          <p class="Body-module_body__eiCkB Body-module_body2__eNf9j Body-module_weight400__4Oy12" variant="2">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">货件编号</font>
            </font>
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">：</font>
            </font>
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">{{
                shipmentList[iteration - 1].shipmentId
                }}</font>
            </font>
            <font style="vertical-align: inherit"></font>
            <font style="vertical-align: inherit">
              <br />
              <font style="vertical-align: inherit">运送至</font>
            </font>
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">: </font>
            </font>
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">{{ shipmentList[iteration - 1].shipFcName }} |
                {{ shipmentList[iteration - 1].shipAddressLine }}，{{
                  shipmentList[iteration - 1].shipCity
                }}，{{ shipmentList[iteration - 1].shipStateCode }}
                {{ shipmentList[iteration - 1].shipPostalCode }}，{{
                  shipmentList[iteration - 1].shipCountryCode
                }}</font>
            </font>
          </p>
        </div>
        <br />
      </div>
      <hr aria-hidden="true" class="Divider-module_divider__3HRuC"
        style="height: 16px; margin-left: -19px; width: 107%" />
      <span slot="footer" class="dialog-footer" v-loading="cancelloading">
        <el-button type="primary" @click="cancelInventory()">确定</el-button>
        <el-button @click="cancelOpen = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getShipmentList,
  getShipmentItems,
  getCancelShipment,
  downloadLabel,
} from "@/api/walmart/shipment";
export default {
  dicts: ["walmart_shipments_status"],
  data() {
    return {
      underline: true,
      underline1: true,
      // 初始化 buttons 对象，为每个迭代值设置一个 underline 属性
      buttons: {},
      shipmentList: [],
      index: 0,
      queryParam: {
        pageNum: 1,
        pageSize: 50,
        inboundOrderId: null,
        authId: null,
        status: null,
      },
      itemIndex: 0,
      shipmentUnitsAdd: 0,
      title: null,
      open: false,
      cancelTitle: null,
      cancelOpen: false,
      shipmentItemList: [],
      shipmentItem: {},
      cancelloading: false,
    };
  },
  mounted() {
    const shipmentData = localStorage.getItem("shipmentData");
    const rowData = JSON.parse(shipmentData);
    this.queryParam.inboundOrderId = rowData.inboundOrderId;
    this.queryParam.authId = rowData.authId;
    this.queryParam.status = rowData.status;
    this.queryParam.shipmentId = rowData.shipmentId;
    this.getShipment();
  },
  methods: {
    returnShipment() {
      this.$router.push("/sale/walmart/walmartWFS/shipments");
    },
    cancelShipment() {
      this.cancelTitle = "取消入库订单？";
      this.cancelOpen = true;
    },
    getShipment() {
      getShipmentList(this.queryParam).then((response) => {
        this.shipmentList = response.rows;
        for (let i = 0; i < this.shipmentList.length; i++) {
          this.itemIndex += this.shipmentList[i].itemIndex;
          this.shipmentUnitsAdd += this.shipmentList[i].shipmentUnits;
        }
        this.index = response.total;
        for (let i = 0; i <= this.index; i++) {
          this.buttons[i] = {
            underline: true, // 假设所有按钮的初始状态都是下划线
          };
        }
      });
    },
    toggleUnderline(iteration, state) {
      // 更新特定迭代的 underline 状态
      this.buttons[iteration].underline = state;
    },
    returnShipmentItem(iteration) {
      // 处理点击事件
      this.shipmentItem = this.shipmentList[iteration - 1];
      this.open = true;
      this.title = "第" + iteration + "批货，共" + this.index + "批";
      getShipmentItems(this.shipmentItem).then((response) => {
        this.shipmentItemList = response.data;
      });
      // 这里可以添加更多的逻辑处理
    },
    styleFor(iteration) {
      // 根据 buttons 中的 underline 状态返回对应的样式
      if (this.buttons[iteration]) {
        return {
          textDecoration: this.buttons[iteration].underline
            ? "underline"
            : "none",
          color: this.buttons[iteration].underline ? "black" : "#007bff",
          fontSize: this.buttons[iteration].fontSize || "16px"
        };
      } else {
        return {
          textDecoration: "none",
          color: "#007bff",
          fontSize: "16px"
        };
      }
    },
    //取消库存
    cancelInventory() {
      this.cancelloading = true;
      getCancelShipment(this.queryParam).then((response) => {
        this.cancelloading = false;
        this.$modal.msgSuccess("取消入库成功");
        setTimeout(() => {
          this.iconCloseReflush();
        }, 500); // 1000毫秒 = 1秒
      });
    },
    iconCloseReflush() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/sale/walmart/walmartWFS/shipments",
        query: { page: 1 }
      }); // 关闭之后要返回的页面
    },
    //货运追踪
    handleTracking() {
      localStorage.setItem("previousPage", this.$route.path);
      localStorage.setItem("shipmentData", JSON.stringify(this.shipmentList[0]));
      this.$router.push("/shipments/tracking");
    },
    // 下载标签
    handleLabel() {
      const row = this.shipmentList[0];
      const shipmentId = row.shipmentId;
      if (shipmentId) {
        downloadLabel({ shipmentId: shipmentId }).then(response => {

          const contentType = response.headers?.['content-type'] || 'application/octet-stream';
          const blob = new Blob([response.data || response], { type: contentType });

          // 获取文件名
          const disposition = response.headers?.['content-disposition'] || '';
          const fileNameMatch = disposition.match(/filename\*=UTF-8''(.+)/);
          const fileName = fileNameMatch ? decodeURIComponent(fileNameMatch[1]) : `label_${shipmentId}.pdf`;

          // 创建下载链接
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }).catch((error) => {
          this.$message.error(error.message || '下载失败');
        });
      } else {
        this.$message.error('Shipment ID not available');
      }
    }
  },
};
</script>

<style>
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.gap-8 {
  grid-gap: 8px !important;
  gap: 8px !important;
}

.gap-24 {
  grid-gap: 24px !important;
  gap: 24px !important;
}

.min-h-screen {
  min-height: 100vh !important;
}

.flex-col,
.flex-col-reverse {
  -webkit-box-orient: vertical !important;
}

.flex-col {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.gap-24 {
  grid-gap: 24px !important;
  gap: 24px !important;
}

.justify-between {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.flex-row,
.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
}

.flex-row {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.text-28 {
  font-size: 28px !important;
}

.PageTitle-module_pageTitle__QNwSU,
.Subheading-module_subheading__gBEUl {
  color: #2e2f32;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 0;
}

.PageTitle-module_pageTitle__QNwSU {
  font-size: 20px;
  line-height: 28px;
}

.flex-grow {
  -webkit-box-flex: 1 !important;
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.Card-module_card__zeE7r {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 1px rgb(0 0 0 / 15%);
  box-sizing: border-box;
  width: 100%;
}

.Divider-module_divider__3HRuC {
  border: 0;
  border-bottom: 1px solid #f1f1f2;
  margin: 0;
  width: 100%;
}

.Body-module_weight700__crYTs {
  font-weight: 700;
}

.Body-module_body3__KFtX3 {
  font-size: 18px;
  line-height: 24px;
}

.Body-module_body__eiCkB {
  color: #2e2f32;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.gap-4 {
  grid-gap: 4px !important;
  gap: 4px !important;
}

.Body-module_weight400__4Oy12 {
  font-weight: 400;
}

.Body-module_body2__eNf9j {
  font-size: 14px;
  line-height: 20px;
}

.Card-module_medium__quHDO {
  padding: 16px;
}

.el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.gap-16 {
  grid-gap: 16px !important;
  gap: 1px !important;
}

.fontsize18 {
  font-size: 18px;
}

.fontsize15 {
  font-size: 15px;
}

.track-button:hover {
  border-width: 2px !important;
  border-color: #000 !important;
}

.underline- {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
